<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="box" v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
      <img src="../../assets/img/newsBg.png" alt="" />
      <div class="sort-box">
        <ul class="clearfix">
          <li>排序:</li>
          <li :class="[sortIndex == 0 ? 'active' : '']" @click="tabs(0)">
            热门资讯
          </li>
          <li :class="[sortIndex == 1 ? 'active' : '']" @click="tabs(1)">
            最新发布
            <!-- <img src="../../assets/img/priceSort.png"> -->
          </li>
        </ul>
      </div>
      <div class="news-box" >
        <ul>
          <li v-for="(item, index) in newList" :key="index" class="clearfix">
            <div class="pic-or-video fl">
              <!-- <video
                src="../../assets/img/1.mp4"
                v-if="item.video"
                controls
              ></video> -->
              <img :src="item.abbrevImg" alt="" />
            </div>
            <div class="new-info fl">
              <h4>{{item.title}}</h4>
              <div class="news-other-info">
                <p>发布组织：{{item.author}}</p>
                <p>发布时间：{{item.createDate}}</p>
              </div>
            </div>
            <p class="look-detail fr" @click="lookDetail(item.id)">查看详情 》</p>
          </li>
        </ul>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage
  },
  data() {
    return {
      sortIndex: 0,
      newList: [],
      pageSize: 10,
      total: 100,
      pageNum: 1,
      loading:false
    };
  },
  mounted () {
    this.getList()
  },
  methods: {
    tabs(index) {
      this.sortIndex = index;
    },
    lookDetail(id) {
      console.log(id)
      this.$router.push({ path: "/News/detail",query:{id:id} });
    },
    getList() {
      this.loading = true;
      this.$http("post", "/sys/news/findNewsListByPage.do", {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      },'json')
        .then(res => {
          if (res.code == "0000") {
            var data = res.result;
            this.newList = data.rows;
            this.total = data.total;
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getList();
    }
  }
};
</script>
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  min-height: 400px;
  background: #fff;
  padding-bottom: 30px;
}
.sort-box {
  margin-left: 68px;
}
.sort-box ul li {
  float: left;
  margin-top: 30px;
  margin-bottom: 20px;
}
.sort-box ul li:nth-child(1) {
  color: #4a4a4a;
  font-size: 14px;
  margin-right: 36px;
}
.sort-box ul li:nth-child(2) {
  margin-right: 32px;
  cursor: pointer;
}
.sort-box ul li:nth-child(3) {
  cursor: pointer;
}
.sort-box ul li:nth-child(3) img {
  width: 16px;
  height: 16px;
  position: relative;
  top: -3px;
}
.sort-box ul li.active {
  color: #f48d06;
}
.news-box {
  width: 1077px;
  margin: 0 auto;
}
.news-box ul li {
  width: 1077px;
  height: 125px;
  background: #ffffff;
  border: 1px solid #ececec;
  padding: 15px 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.news-box ul li .pic-or-video {
  width: 132px;
  height: 96px;
}
.news-box ul li .pic-or-video img,
.news-box ul li .pic-or-video video {
  width: 100%;
  height: 100%;
}
.news-box ul li .new-info {
  width: 720px;
  margin-left: 60px;
}
.news-box ul li .new-info h4 {
  font-size: 20px;
  color: #292929;
  margin-top: 20px;
  margin-bottom: 10px;
}
.news-box ul li .new-info .news-other-info p {
  display: inline;
  color: #4a4a4a;
  font-size: 13px;
}
.news-box ul li .new-info .news-other-info p:nth-child(1) {
  margin-right: 60px;
}
.look-detail {
  font-size: 14px;
  color: #4a4a4a;
  line-height: 100px;
  cursor: pointer;
}
.look-detail:hover {
  color: #f48d06;
  text-decoration: underline;
}
.pagination {
  margin-left: 400px;
  margin-top: 40px;
}
</style>
